<template>
  <view class="orderBox">
    <view
      class="order"
      v-for="item of items"
      :key="item.id"
      @click="handle('detail', item)"
    >
      <view class="orderNo">
        <view class="orderNoLet"
          >{{ $t("newAdmin.order.no") }}：{{ item.order_no }}</view
        >
        <view
          class="status"
          :class="[parseInt(item.status) === 1 ? 'on' : '']"
          >{{ getStatus(item.status) }}</view
        >
      </view>

      <view class="orderItem" v-for="cItem of item.orderDetail" :key="cItem.id">
        <view class="img"
          ><image :src="cItem.pic" mode="aspectFill"></image
        ></view>

        <view class="orderTxt">
          <view class="title">{{ cItem.name }}</view>

          <view class="attr">
            <view class="tagItem">
              {{ getAttrName(cItem.attr) }}
            </view>
            <view class="num">x{{ cItem.num }}</view>
          </view>

          <view class="price">
            <view class="em before">¥</view>
            <view class="con">{{ getPrect(cItem.total_price)[0] }}</view>
            <view class="em after">.{{ getPrect(cItem.total_price)[1] }}</view>
          </view>
        </view>
      </view>

      <view class="orderTotalPrice">
        <view class="item num"
          >共{{ item.orderDetail.length + $t("newAdmin.order.product") }}</view
        >
        <view class="item price"
          >{{ $t("newAdmin.order.total") }}：￥{{ item.pay_price }}</view
        >
      </view>

      <view class="orderBtn">
        <template
          v-if="
            (parseInt(item.status) === 0 || ( item.status == -1 && item.pay_type == 2 )) &&
            (item.md_id == 0 || (item.md_id > 0 && item.is_trans == 1))
          "
        >
          <view class="item" @click.stop="handle('cancel', item)">
            {{ $t("newAdmin.order.cancleOrder") }}
          </view>
          <view class="item on" @click.stop="handle('delivery', item)">
            {{ $t("newAdmin.order.sendGoods") }}
          </view>
        </template>
        <view
          class="item"
          v-if="item.status === '-1'"
          @click.stop="handle('setPrice', item)"
        >
          修改价格
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  computed: {
    getPrect() {
      return (price) => {
        let newPrice = String(price).split(".");

        return newPrice;
      };
    },

    getAttrName() {
      return (attr) => {
        if (attr && attr.length) {
          return attr
            .map((el) => el.attr_group_name + ":" + el.attr_name)
            .join();
        }

        return "";
      };
    },

    getStatus() {
      return (status) => {
        let str;

        switch (parseInt(status)) {
          case -1:
            str = this.$t("newAdmin.order.unpaid");
            break;

          case 0:
            str = this.$t("newAdmin.order.notShipped");
            break;

          case 1:
            str = this.$t("newAdmin.order.cancelled");
            break;

          case 2:
            str = this.$t("newAdmin.order.ReceivableGoods");
            break;

          case 3:
            str = this.$t("newAdmin.order.salesService");
            break;
        }

        return str;
      };
    },
  },

  data() {
    return {
      customStyle: {
        background: "#F0250E",
        color: "#fff",
        borderRadius: "32px",
        display: "inline-block",
        height: "72rpx",
        lineHeight: "72rpx",
        marginLeft: "16rpx",
      },

      hoverStartTime: 1000000,
    };
  },

  methods: {
    handle(type, item) {
      switch (type) {
        case "cancel":
          this.$utils.showModal(
            this.$t("newAdmin.warning.title"),
            this.$t("newAdmin.warning.cancelOrder"),
            true,
            () => {
              this.Emit.$emit("handleList", type, item);
            }
          );
          break;

        case "delivery":
          uni.navigateTo({
            url: `/admin/order/delivery/index?id=${item.id}`,
          });
          break;

        case "detail":
          uni.navigateTo({
            url: `/admin/order/item/index?id=${item.id}&type=0`,
          });
          break;

        default:
          this.Emit.$emit("handleList", type, item);
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  padding: 30rpx 24rpx;
  background: #fff;
  margin-top: 24rpx;
}

.orderNo {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .status {
    color: #f0250e;

    &.on {
      color: #8c8c8c;
    }
  }
}

.orderItem {
  display: flex;
  margin-top: 30rpx;

  .img {
    width: 180rpx;
    height: 180rpx;

    image {
      width: 100%;
      height: 100%;
      background: #f6f6f6;
      border-radius: 10rpx;
    }
  }
}

.orderTxt {
  flex: 1;
  overflow: hidden;
  margin-left: 24rpx;

  .attr {
    display: flex;
    padding: 10rpx 0;
    font-size: 22rpx;

    .num {
      color: #8c8c8c;
    }

    .tagItem {
      margin-right: 10rpx;
      flex: 1;
      overflow: hidden;
    }
  }

  .title {
    font-size: 28rpx;
    color: #262626;
    line-height: 40rpx;
    max-height: 80rpx;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  .tag {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 5rpx 0 20rpx;
  }

  .tagItem {
    margin-right: 20px;
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .price {
    display: flex;
    align-items: flex-end;
    color: #262626;
    font-size: 40rpx;
    line-height: 1;

    .con {
      position: relative;
      top: 4rpx;
    }

    .em {
      font-size: 24rpx;
    }
  }
}

.orderTotalPrice {
  text-align: right;

  .item {
    display: inline-block;
    margin-left: 20rpx;
  }
}

.orderBtn {
  display: flex;
  justify-content: flex-end;
  margin-top: 25rpx;

  .item {
    margin-left: 24rpx;
    width: 170rpx;
    padding: 10rpx 0;
    border: 1px solid #a1a1a1;
    border-radius: 32px;
    font-size: 26rpx;
    text-align: center;

    &.on {
      color: #f0250e;
      border-color: #f0250e;
    }
  }
}
</style>
